<template>
	<view class="photoArt_box">
		<view class="photoArt_tit">
			<view class="photoArt_tit_en">
				THE ADDRESS
			</view>
			<view class="photoArt_tit_cn">
				-婚宴地址-
			</view>
			<image class="photoArt_tit_line" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/8f490f1c-3db1-46a5-b0f0-7380b74f25f8.webp" mode="heightFix"></image>
		</view>
		<!-- 流程 -->
		<view class="picture_process">
			<view class="picture_process_map">
				<map @click="goMap" id="myMap" :scale="scale" style="width: 100%; height: 150px;"
				enable-3D="false" show-compass="false" enable-overlooking="false"
				:enable-satellite="false" :enable-traffic="false" show-location="false"
				:latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
			<!-- 信息 -->
			<view class="address_info">
				<view class="address_info_li">
					时间：{{mapInfo.startTime}}
				</view>
				<view class="address_info_li">
					地点：{{mapInfo.address}}
				</view>
				<view class="address_icon">
					<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/d6d88511-c1d9-4268-a851-fa844c2138c8.webp" mode="heightFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref,defineProps } from 'vue'
const latitude:Number = ref(39.899)
const longitude:Number = ref(116.39742) 
const scale:Number = ref(15)
const mapCtx = wx.createMapContext('myMap')

const props = defineProps({
	mapInfo: Object
})

console.log(props.mapInfo)

latitude.value = props.mapInfo.latitude || 0

longitude.value = props.mapInfo.longitude || 0

console.log(props.mapInfo)

const goMap = ()=>{
	const mapInfo = props.mapInfo
	console.log('执行了')
	uni.openLocation({
		latitude: latitude.value,
		longitude: longitude.value,
		name: mapInfo.name || '',
		address: mapInfo.address || '',
		scale: scale.value
	})
}
</script>

<style lang="scss" scoped>
.photoArt_box {
	padding: 0 60rpx;
	.photoArt_tit {
		text-align: center;
		padding-top: 60rpx;
		margin-bottom: 10rpx;
		color: #d9b475;
		.photoArt_tit_en {
			font-size: 46rpx;
			margin-bottom: 10rpx;
		}
		.photoArt_tit_cn {
			font-size: 36rpx;
			margin-bottom: 10rpx;
		}
		.photoArt_tit_line {
			height: 32rpx;
			animation: photoArtTit 2s linear;
			@keyframes photoArtTit {
				0% {
					transform: scale(.5);
				}
				100% {
					transform: scale(1);
				}
			}
		}
	}
	.picture_process {
		.picture_process_map {
			border: 6rpx solid #d9b475;
			margin-bottom: 10rpx;
			animation: mapFadeIn 2s linear;
			@keyframes mapFadeIn {
				0% {
					opacity: .3;
				}
				100% {
					opacity: 1;
				}
			}
		}
		.address_info {
			color: #d9b475;
			padding: 0 20rpx;
			.address_icon {
				text-align: center;
				margin-top: -40rpx;
				image {
					height: 100rpx;
				}
			}
			animation: infoFadeIn 2s linear;
			@keyframes infoFadeIn {
				0% {
					transform: scale(.5);
				}
				100% {
					transform: scale(1);
				}
			}
			
		}
	}
}
</style>